<template>
	<el-button type="primary" plain size="large" @click="control_click" :disabled="!canGetCode">{{control.text}}</el-button>
</template>
<script>
	import config from "@/config/config.js";
	import xcHttpUtils from '@/library/xcore/js/XcHttpUtils.js';
	import xcViewUtils from '@/library/xcore/js/XcViewUtils.js';
	import {
		xsStringUtils,
		xsDateUtils,
		xsArrayUtils
	} from 'xstack-for-javascript';

	export default {
		props: {
			startText: {
				type: String,
			},
			endText: {
				type: String,
			},
			seconds: {
				type: Number,
				default: 60,
			},
		},
		watch: {
			'data': {
				handler(newVal, oldVal) {
					let that = this;
				},
			},
		},
		data() {
			return {
				canGetCode:true,
				config: config,
				xsStringUtils: xsStringUtils,
				xsDateUtils: xsDateUtils,
				sp: {},
				sr: {},
				control: {
					text:"",
					restSecond:0,
				}
			}
		},
		created() {
			let that = this;
			that.xinit();
		},
		methods: {
			xinit() {
				let that = this;
				that.control.text = that.startText;
			},
			start(){
				let that = this;
				that.canGetCode = false;
				let i = 0;
				let si = setInterval(function(){
					that.control.restSecond = that.seconds - i;
					// that.control.text = that.control.restSecond + " 秒重新获取";
					that.control.text = xsStringUtils.replace(that.$t('xclogin.login.msg_countdown_ccode'),"X",that.control.restSecond);
					i++;
					if(that.control.restSecond<=0){
						that.control.text = that.endText;
						clearInterval(si);
						that.canGetCode = true;
					}
				},1000);
			},
			control_click(){
				let that = this;
				that.$emit("start");
			}
		}
	}
</script>

<style lang="scss">
.el-button{
	width:120px;
}
</style>